<!--
 * @Author: wangming
 * @Date: 2021-04-01 14:02:25
 * @LastEditors: wangming
 * @LastEditTime: 2021-10-13 11:18:56
 * @Description: file content
-->
<template>
  <div>
    <el-form-item label="下拉菜单">
      <el-button
        @click="editJSON"
        type="primary"
        icon="el-icon-edit"
        plain
        size="mini"
        >配置</el-button
      >
    </el-form-item>
    <el-form-item label="节点自定义渲染" class="tr">
      <el-switch v-model="value.__config.isRender" />
    </el-form-item>
    <div v-if="value.__config.isRender">
      <el-button
        @click="editJsx"
        type="primary"
        icon="el-icon-edit"
        plain
        size="mini"
        >代码编辑</el-button
      >
    </div>
  </div>
</template>

<script>
import basicmixins from "./basicmixins";
import monacoEditor from "./hlTableList/monacoEditor/index.js";
const templateJSX = `/**
 * 
 * @param {*} h 系统预留字段
 * @param {*} param1  {context:页面工具类对象,node：节点对象,}
 * @param {*} rootScope  页面公共事件对象
 * @returns 
 */
function render(h, {context,node},rootScope) {
  return <div>{row[column.code]}</div>
}`;
const template = `/**
 * 渲染菜单数据
 * @param {*} node 当前tree的对象
 * @returns [object] | [{ label:string,event:string,disabled:Boolean }]
 */
function getDropMenus(node) {
  return []
}`;
export default {
  mixins: [basicmixins],
  data() {
    return {};
  },
  methods: {
    editJsx() {
      let jsx = this.value.__config.renderJsx || templateJSX;
      monacoEditor.showEdit(decodeURIComponent(jsx)).then((res) => {
        Object.assign(this.value.__config, {
          renderJsx: encodeURIComponent(res),
        });
      });
    },
    editJSON() {
      let jsx = this.value.__config.dropMenu || template;
      monacoEditor
        .showEdit(decodeURIComponent(jsx), { title: "配置下拉菜单" })
        .then((res) => {
          Object.assign(this.value.__config, {
            dropMenu: encodeURIComponent(res),
          });
        });
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep .el-form-item--mini.el-form-item,
.el-form-item--small.el-form-item {
  margin-bottom: 10px;
}
</style>
